<template>
  <view class="cu-nav-bar-wrap">
    <view class="uni-page-head" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0)">
      <view class="uni-page-head-hd" @click="clickLeft">
        <view class="uni-page-head-btn"
          ><i class="uni-btn-icon" style="color: rgb(0, 0, 0); font-size: 54rpx"></i></view
        >
        <view class="uni-page-head-ft"></view>
      </view>
      <view class="uni-page-head-bd">
        <view class="uni-page-head__title">
          {{ title }}
        </view>
      </view>
      <view class="uni-page-head-ft" @click="clickRight" v-if="rightText">
        {{ rightText }}
      </view>
    </view>
    <view class="uni-placeholder"></view>
  </view>
</template>

<script>
export default {
  name: 'cu-nav-bar',
  props: {
    title: {
      type: String
    },
    rightText: {
      type: String
    }
  },
  data() {
    return {}
  },
  methods: {
    clickLeft() {
      this.$emit('clickLeft')
    },
    clickRight() {
      this.$emit('clickRight')
    }
  }
}
</script>

<style lang="scss" scoped>
.cu-nav-bar-wrap {
  display: block;
  box-sizing: border-box;

  .uni-page-head {
    position: fixed;
    top: var(--status-bar-height);
    left: var(--window-left);
    right: var(--window-right);
    height: 44px;
    height: calc(44px + constant(safe-area-inset-top));
    height: calc(44px + env(safe-area-inset-top));
    padding: 7px 3px;
    padding-top: calc(7px + constant(safe-area-inset-top));
    padding-top: calc(7px + env(safe-area-inset-top));
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    justify-content: space-between;
    box-sizing: border-box;
    z-index: 998;
    color: #fff;
    background-color: #000;
    transition-property: all;
  }

  .uni-page-head * {
    box-sizing: border-box;
  }

  .uni-page-head-transparent .uni-page-head-ft > div {
    justify-content: center;
  }

  .uni-page-head ~ .uni-placeholder {
    width: 100%;
    height: 44px;
    height: calc(44px + constant(safe-area-inset-top) + var(--status-bar-height));
    height: calc(44px + env(safe-area-inset-top) + var(--status-bar-height));
  }

  .uni-page-head-hd {
    display: flex;
    align-items: center;
    font-size: 32rpx;
  }

  .uni-page-head-bd {
    position: absolute;
    left: 140rpx;
    right: 140rpx;
    min-width: 0;
  }

  .uni-page-head-btn {
    position: relative;
    width: auto;
    margin: 0 4rpx;
    word-break: keep-all;
    white-space: pre;
    cursor: pointer;
  }

  .uni-page-head__title {
    font-size: 32rpx;
    line-height: 60rpx;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .uni-page-head-ft {
    font-size: 30rpx;
    line-height: 60rpx;
    padding-right: 24rpx;
  }
}
</style>
